<template>
	<view class="sb-item" :class="statusClass" @click="onclick">
		<view class="title">
			<view class="left">
				<icon class="ic-shebei iconfont bs-shebei" type=""></icon>
				<text>{{ item.name }}</text>
			</view>
			<view v-if="isShowStatus">
				<view class="right dui" v-if="item.status === '可预约'">
					<text>{{ item.status }}</text>
					<icon class="ic-dui iconfont bs-dui"></icon>
				</view>
				<view class="right cuo" v-else-if="item.status === '维护中'">
					<text>{{ item.status }}</text>
					<icon class="ic-cuo iconfont bs-cuo"></icon>
				</view>
				<view class="right zanting" v-if="item.status === '暂停开放'">
					<text>{{ item.status }}</text>
					<icon class="ic-cuo iconfont bs-cuo"></icon>
				</view>
				<view class="right jianshe" v-if="item.status === '建设中'">
					<text>{{ item.status }}</text>
					<icon class="ic-jianshe iconfont bs-jianshe"></icon>
				</view>
				<view class="right guzhang" v-if="item.status === '故障中'">
					<text>{{ item.status }}</text>
					<icon class="ic-guzhang iconfont bs-guzhang"></icon>
				</view>
			</view>
		</view>
		<view class="time-root">
			<view class="time-item" :class="{ 'active': !isTimeSelected(1) }">
				<text>8-10</text>
			</view>
			<view class="time-item" :class="{ 'active': !isTimeSelected(2) }">
				<text>10-12</text>
			</view>
			<view class="time-item" :class="{ 'active': !isTimeSelected(3) }">
				<text>14-16</text>
			</view>
			<view class="time-item" :class="{ 'active': !isTimeSelected(4) }">
				<text>16-18</text>
			</view>
		</view>

		<view class="bottom">
			<view class="address">
				<text>{{ item.detail }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { defineProps, computed, ref, onMounted } from 'vue'
import db from '@/api/database'

const props = defineProps({
	item: {
		type: Object,
		default: {},
	},
	isShowStatus: {
		type: Boolean,
		default: false,
	},
	confirmDate: {
		type: Object,
		default: () => ({})
	}
})

const yysd = ref([])
const isLoaded = ref(false)

onMounted(() => {
	getYysd()
})

async function getYysd() {
	try {
		const res = await db.collection('yyjl').where({
			date: `${props.confirmDate.year}-${String(props.confirmDate.month).padStart(2, '0')}-${String(props.confirmDate.day).padStart(2, '0')}`,
			sbID: props.item._id
		}).get()

		yysd.value = res.data.reduce((acc, curr) => {
			return acc.concat(curr.time)
		}, [])
		isLoaded.value = true
	} catch (err) {
		console.log('查询预约记录失败:', err)
		isLoaded.value = true
	}
}

// 计算动态样式，根据状态变化
const statusClass = computed(() => {
	switch (props.item.status) {

		case '可预约':
			return 'dui'
		case '5':
			return 'dui'
		case '维护中':
			return 'cuo'
		case '4':
			return 'cuo'
		case '暂停开放':
			return 'zanting'
		case '2':
			return 'zanting'
		case '建设中':
			return 'jianshe'
		case '3':
			return 'jianshe'
		case '故障中':
			return 'guzhang'
		case '6':
			return 'guzhang'
		default:
			return ''
	}
})

// 判断是否选择了某个时间段
const isTimeSelected = (timeSlot: number) => {
	// 获取当前时间
	const now = new Date()
	const currentHour = now.getHours()
	const currentMinute = now.getMinutes()

	// 定义时间段对应的开始时间
	const timeSlotStartHours = {
		1: 8,  // 8:00
		2: 10, // 10:00
		3: 14, // 14:00
		4: 16  // 16:00
	}

	// 如果当前时间已经超过该时间段的开始时间，则显示灰色
	if (currentHour > timeSlotStartHours[timeSlot] || 
		(currentHour === timeSlotStartHours[timeSlot] && currentMinute > 0)) {
		return false
	}

	if (props.item.status != "可预约") {
		return false
	} else {
		return !(yysd.value && yysd.value.toString().includes(timeSlot.toString()));
	}
}

function onclick() {
	uni.navigateTo({
		url: `/pages/reservationDetail/reservationDetail?id=${props.item._id}`
	})
}
</script>
<style lang="scss" scoped>
@import "/static/css/iconfont.css";

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sb-item {
	margin-bottom: 10px;
	width: calc(50% - 30px);
	padding: 10px 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	animation: fadeIn 0.5s ease-out;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	&:active {
		transform: translateY(2px);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	}
}

.sb-item.dui {
	border-left: 5px solid #4cd964;
}

.sb-item.cuo {
	border-left: 5px solid #F17662;
}

.sb-item.zanting {
	border-left: 5px solid #9BA0AC;
}

.sb-item.jianshe {
	border-left: 5px solid #f69c00;
}

.sb-item.guzhang {
	border-left: 5px solid #F0B500;
}

.title {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #2d2d2d;
	text-align: center;
	margin-bottom: 10px;

	.dui {
		color: #4cd964;
		background-color: rgba(76, 217, 100, 0.1);
		padding: 4px 8px;
		border-radius: 4px;
		margin-top: 5px;
	}

	.cuo {
		color: #F17662;
		background-color: rgba(241, 118, 98, 0.1);
		padding: 4px 8px;
		border-radius: 4px;
		margin-top: 5px;
	}

	.jianshe {
		color: #f69c00;
		background-color: rgba(246, 156, 0, 0.1);
		padding: 4px 8px;
		border-radius: 4px;
		margin-top: 5px;
	}

	.zanting {
		color: #9BA0AC;
		background-color: rgba(155, 160, 172, 0.1);
		padding: 4px 8px;
		border-radius: 4px;
		margin-top: 5px;
	}

	.guzhang {
		color: #F0B500;
		background-color: rgba(240, 181, 0, 0.1);
		padding: 4px 8px;
		border-radius: 4px;
		margin-top: 5px;
	}
}

.left {
	display: flex;
	align-items: center;

	.ic-shebei {
		color: #2196f3;
		font-size: 20px;
	}

	text {
		font-size: 15px;
		margin-left: 6px;
		font-weight: bold;
		color: #333;
	}
}

.right {
	font-size: 12px;
	font-weight: bold;
	display: flex;
	align-items: center;

	.ic-dui,
	.ic-cuo,
	.ic-jianshe,
	.ic-guzhang {
		font-size: 14px;
		margin-left: 4px;
	}

	text {
		margin-right: 3px;
	}
}

.time-root {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.time-item {
		font-size: 12px;
		width: 48%;
		background-color: #e8f7e8;
		color: #1c5324;
		border: 1px solid #4cd964;
		border-radius: 6px;
		padding: 4px 0;
		margin-bottom: 6px;
		text-align: center;
		transition: all 0.2s ease;
	}

	.time-item.active {
		border: 1px solid #e0e0e0;
		background-color: #f5f5f5;
		color: #999;
	}
}

.bottom {
	margin-top: 5px;
	color: #666;

	.address {
		font-size: 12px;
		text-align: center;
		line-height: 1.4;
	}
}
</style>